<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudentHub - 学生知识平台</title>
    <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon">
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- 配置 Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: {
                            100: '#F8FAFC',
                            200: '#E2E8F0',
                            300: '#CBD5E1',
                            400: '#94A3B8',
                            500: '#64748B',
                            600: '#475569',
                            700: '#334155',
                            800: '#1E293B',
                            900: '#0F172A',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-balance {
                text-wrap: balance;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>

    <style>
        .modal-backdrop {
            z-index: 1040 !important;
        }

        .modal-content {
            z-index: 1050 !important;
        }

        .content-cell {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .article-card {
            transition: all 0.3s ease;
        }

        .article-card:hover {
            transform: translateY(-5px);
        }

        .nav-pills .nav-link.active {
            background-color: #165DFF !important;
            color: white !important;
        }

        .nav-pills .nav-link {
            color: #475569 !important;
        }

        .category-item {
            transition: all 0.2s ease;
        }

        .category-item:hover {
            background-color: rgba(22, 93, 255, 0.05);
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-800">
<!-- 导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <a href="/qian/home.html" class="text-primary font-bold text-xl flex items-center">
                <i class="fa fa-graduation-cap mr-2"></i>
                <span>StudentHub</span>
            </a>
        </div>

        <nav class="hidden md:flex items-center space-x-6">
            <a href="/qian/home.html" class="text-primary font-medium">首页</a>
            <!-- 后台管理按钮 -->
            <a href="/hou/index.html" id="adminButton" class="hidden bg-primary text-white px-3 py-1 rounded font-medium hover:bg-primary/90 transition-colors">
                后台管理
            </a>
        </nav>

        <div class="flex items-center space-x-4">
            <!-- Logout Button -->
            <button id="logoutButton" class="text-red-500 hover:text-red-700 transition-colors font-medium hidden md:block">
                退出登录
            </button>

            <div class="relative hidden md:block">
                <label>
                    <input type="text" placeholder="搜索课程、学习资料..." class="pl-10 pr-4 py-2 rounded-full bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary/30 transition-all w-48 focus:w-64">
                </label>
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>

            <div class="relative group">
                <a href="/qian/user-center.html" class="rounded-full overflow-hidden border-2 border-white hover:border-primary transition-all">
                    <!-- Server-side code should replace the src with the user's avatar from session -->
                    <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-full h-full object-cover rounded-full" style="width: 40px; height: 40px;">
                </a>

                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform group-hover:translate-y-0 translate-y-2">
                    <a href="user.html" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
                        <i class="fa fa-user-o mr-2"></i> 个人主页
                    </a>
                    <a href="#" class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100">
                        <i class="fa fa-cog mr-2"></i> 设置
                    </a>
                    <div class="border-t border-neutral-200 my-1"></div>
                    <a href="#" id="logoutLink" class="block px-4 py-2 text-sm text-red-500 hover:bg-neutral-100">
                        <i class="fa fa-sign-out mr-2"></i> 退出登录
                    </a>
                </div>
            </div>

            <button class="md:hidden text-neutral-600 hover:text-primary transition-colors">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8 md:py-12">
    <!-- 欢迎横幅 -->
    <div class="bg-gradient-to-r from-primary to-blue-400 rounded-2xl p-6 md:p-8 text-white mb-8 animate-fade-in">
        <div class="flex flex-col md:flex-row md:items-center justify-between">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold mb-2">欢迎来到 StudentHub</h1>
                <p class="text-white/80 mb-4">探索知识，提升能力，与优秀学子共同成长</p>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full text-sm transition-all">
                        <i class="fa fa-book mr-1"></i> 课程学习
                    </span>
                    <span class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full text-sm transition-all">
                        <i class="fa fa-lightbulb-o mr-1"></i> 知识分享
                    </span>
                    <span class="bg-white/10 hover:bg-white/20 px-3 py-1 rounded-full text-sm transition-all">
                        <i class="fa fa-users mr-1"></i> 学习社区
                    </span>
                </div>
            </div>
            <div class="mt-6 md:mt-0">
                <a href="/qian/create_article.html" class="bg-white text-primary hover:bg-white/90 px-6 py-2 rounded-lg font-medium transition-all flex items-center">
                    <i class="fa fa-plus mr-2"></i> 创建学习笔记
                </a>
            </div>
        </div>
    </div>

    <!-- 分类导航 -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-8 animate-fade-in">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-neutral-900">学习分类</h2>
            
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <!-- 学习分类内容将在这里动态填充 -->
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 左侧内容区 -->
        <div class="lg:col-span-2 space-y-8">
            <!-- 热门话题 -->
            <div class="bg-white rounded-xl shadow-sm p-5 animate-slide-up" style="animation-delay: 0.1s">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-bold text-neutral-900">知识列表</h2>
                    
                </div>

                <div class="space-y-4">
                    <!-- 话题项 -->
                    <p class="text-center text-neutral-500">正在加载文章...</p>
                </div>
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="space-y-8">
            <!-- 用户活跃度 -->
            <div class="bg-white rounded-xl shadow-sm p-5 animate-slide-up" style="animation-delay: 0.3s">
                <h2 class="text-lg font-bold text-neutral-900 mb-4">用户活跃度</h2>
                <div class="h-64">
                    <canvas id="activityChart"></canvas>
                </div>
                <div class="grid grid-cols-3 gap-2 mt-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-primary">2.5k</div>
                        <div class="text-xs text-neutral-500">月发帖量</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-blue-500">8.7k</div>
                        <div class="text-xs text-neutral-500">月评论量</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-green-500">12.3k</div>
                        <div class="text-xs text-neutral-500">月浏览量</div>
                    </div>
                </div>
            </div>

            <!-- 热门标签 -->
            <div class="bg-white rounded-xl shadow-sm p-5 animate-slide-up" style="animation-delay: 0.4s">
                <h2 class="text-lg font-bold text-neutral-900 mb-4">热门标签</h2>
                <div class="flex flex-wrap gap-2">
                    <a href="#" class="px-3 py-1.5 bg-primary/10 text-primary rounded-full text-sm hover:bg-primary/20 transition-colors">#JavaScript</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#React</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#Vue</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#Node.js</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#TypeScript</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#前端开发</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#后端开发</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#人工智能</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#微服务</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#数据库</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#云计算</a>
                    <a href="#" class="px-3 py-1.5 bg-neutral-100 text-neutral-600 rounded-full text-sm hover:bg-neutral-200 transition-colors">#安全</a>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 底部区域 -->
<footer class="bg-white border-t border-neutral-200 mt-12">
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <h3 class="text-lg font-bold text-neutral-900 mb-4">StudentHub</h3>
                <p class="text-neutral-600 text-sm mb-4">探索知识，提升能力，与优秀学子共同成长。</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-linkedin text-xl"></i>
                    </a>
                    <a href="#" class="text-neutral-500 hover:text-primary transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="border-t border-neutral-200 mt-8 pt-8 text-center text-neutral-500 text-sm">
            
        </div>
    </div>
</footer>

<!-- 返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-primary/90 hover:bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all transform translate-y-20 opacity-0">
    <i class="fa fa-angle-up text-xl"></i>
</button>
<script src="/jquery-3.7.1.min.js"></script>
<script>
    // Check for user ID in sessionStorage before loading the page
    const userId = sessionStorage.getItem('userId');
    if (!userId) {
        // If userId is not found, redirect to login page
        window.location.href = '/login.html';
    } else {
        // If userId exists, continue with page loading logic
        $(document).ready(function() {
            // Dynamically set the header avatar from sessionStorage
            const userAvatarName = sessionStorage.getItem('avatarUrl'); // Get the avatar filename from sessionStorage using the key 'avatarUrl'
            const headerAvatar = $('#navbar a.rounded-full img'); // Corrected selector for the avatar image in the header
            const avatarBaseUrl = 'http://localhost:8082/upload/';
            if (userAvatarName && headerAvatar.length > 0) {
                headerAvatar.attr('src', avatarBaseUrl + userAvatarName);
            } else {
                // Optionally set a default avatar if not found in session
                headerAvatar.attr('src', 'http://localhost:8082/upload/default.jpg');
            }

            // Control visibility of Admin button based on user role
            const userRole = sessionStorage.getItem('userRole'); // Assuming user role is stored under this key
            const adminButton = $('#adminButton');

            if (userRole === 'ADMIN') {
                adminButton.removeClass('hidden');
            } else {
                adminButton.addClass('hidden');
            }

            // 返回顶部按钮
            window.addEventListener('scroll', function() {
                const backToTopBtn = document.getElementById('backToTop');
                if (window.pageYOffset > 300) {
                    backToTopBtn.classList.remove('translate-y-20', 'opacity-0');
                    backToTopBtn.classList.add('translate-y-0', 'opacity-100');
                } else {
                    backToTopBtn.classList.remove('translate-y-0', 'opacity-100');
                    backToTopBtn.classList.add('translate-y-20', 'opacity-0');
                }
            });

            document.getElementById('backToTop').addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const navbar = document.getElementById('navbar');
                if (window.pageYOffset > 50) {
                    navbar.classList.add('py-2', 'shadow-md');
                    navbar.classList.remove('py-3', 'shadow-sm');
                } else {
                    navbar.classList.add('py-3', 'shadow-sm');
                    navbar.classList.remove('py-2', 'shadow-md');
                }
            });

            // 用户活跃度图表
            const activityCtx = document.getElementById('activityChart').getContext('2d');
            new Chart(activityCtx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '活跃用户',
                        data: [1200, 1900, 1700, 2100, 2500, 3200, 2800],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // Function to format time ago
            function timeAgo(timestamp) {
                const now = new Date();
                const past = new Date(timestamp);
                const diffInSeconds = Math.floor((now - past) / 1000);

                if (diffInSeconds < 60) {
                    return diffInSeconds + ' 秒前';
                } else if (diffInSeconds < 3600) {
                    return Math.floor(diffInSeconds / 60) + ' 分钟前';
                } else if (diffInSeconds < 86400) {
                    return Math.floor(diffInSeconds / 3600) + ' 小时前';
                } else if (diffInSeconds < 2592000) { // 30 days
                    return Math.floor(diffInSeconds / 86400) + ' 天前';
                } else if (diffInSeconds < 31536000) { // 365 days
                    return Math.floor(diffInSeconds / 2592000) + ' 个月前';
                } else {
                    return Math.floor(diffInSeconds / 31536000) + ' 年前';
                }
            }

            // 获取文章列表并渲染
            function fetchArticles() {
                $.ajax({
                    url: 'http://localhost:8082/api/articles/list',
                    type: 'GET',
                    success: function(response) {
                        // 检查响应是否是数组且非空
                        if (Array.isArray(response) && response.length > 0) {
                            const articles = response;

                            // Sort articles by createdAt in descending order (newest first)
                            articles.sort((a, b) => {
                                const dateA = new Date(a.createdAt);
                                const dateB = new Date(b.createdAt);
                                return dateB - dateA; // Descending order
                            });

                            const articlesContainer = $('.space-y-4'); // 热门话题下的文章列表容器
                            articlesContainer.empty(); // 清空现有内容

                            const avatarBaseUrl = 'http://localhost:8082/upload/';
                            articles.forEach(article => {
                                const articleHtml = `
                                    <div class="border-b border-neutral-100 pb-4">
                                        <div class="flex items-start">
                                            <img src="${avatarBaseUrl}${article.avatarUrl || 'default.jpg'}" alt="用户头像" class="w-10 h-10 rounded-full mr-3 object-cover">
                                            <div class="flex-1">
                                                <div class="flex justify-between">
                                                    <h3 class="font-medium text-neutral-900">${article.nickName || '匿名用户'}</h3>
                                                    <span class="text-xs text-neutral-500">${timeAgo(article.createdAt)}</span>
                                                </div>
                                                <a href="/qian/article_detail.html?articleId=${article.articleId}" class="block mt-1 text-neutral-800 hover:text-primary transition-colors">
                                                    <h4 class="font-bold">${article.title}</h4>
                                                </a>
                                                <p class="text-neutral-600 text-sm mt-1 line-clamp-2">${article.content || '无内容'}</p>

                                                <div class="flex items-center justify-between mt-2">
                                                    <div class="flex items-center space-x-4">
                                                        <button class="text-neutral-500 hover:text-primary transition-colors text-sm flex items-center">
                                                            <i class="fa fa-thumbs-o-up mr-1"></i> 0 <!-- 假设点赞数为0，或从API获取 -->
                                                        </button>
                                                        <button class="text-neutral-500 hover:text-primary transition-colors text-sm flex items-center">
                                                            <i class="fa fa-comment-o mr-1"></i> 0 <!-- 假设评论数为0，或从API获取 -->
                                                        </button>
                                                        <button class="text-neutral-500 hover:text-primary transition-colors text-sm flex items-center">
                                                            <i class="fa fa-bookmark-o mr-1"></i> 收藏 <!-- 假设收藏功能，计数为0或省略 -->
                                                        </button>
                                                    </div>
                                                    <div class="flex items-center space-x-2">
                                                         ${article.tagName ? `<span class="bg-primary/10 text-primary px-2 py-0.5 rounded-full text-xs">${article.tagName}</span>` : ''}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                `;
                                articlesContainer.append(articleHtml);
                            });

                        } else if (Array.isArray(response) && response.length === 0) {
                             // 如果返回空数组，显示没有文章的提示
                             $('.space-y-4').html('<p class="text-center text-neutral-500">暂无文章。</p>');
                        } else {
                            // 处理非预期的响应格式
                            console.error('获取文章列表失败: 响应格式不正确', response);
                             $('.space-y-4').html('<p class="text-center text-red-500">加载文章失败，请稍后重试。</p>');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('文章列表请求失败:', error);
                        // 在页面上显示错误信息
                        $('.space-y-4').html('<p class="text-center text-red-500">加载文章失败，请稍后重试。</p>');
                    }
                });
            }

            // 获取学习分类并渲染
            function fetchCategories() {
                $.ajax({
                    url: 'http://localhost:8082/api/tag-articles/get-article-count-by-tag',
                    type: 'GET',
                    success: function(response) {
                        if (response.code === 200 && Array.isArray(response.data) && response.data.length > 0) {
                            const categories = response.data;
                            const categoriesContainer = $('.grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6.gap-3'); // 学习分类的容器
                            categoriesContainer.empty(); // 清空现有内容

                            // 预设一些背景颜色类，循环使用
                            const bgColors = ['bg-primary/10 text-primary', 'bg-blue-100 text-blue-500', 'bg-green-100 text-green-500', 'bg-purple-100 text-purple-500', 'bg-yellow-100 text-yellow-500', 'bg-red-100 text-red-500'];

                            categories.forEach((category, index) => {
                                const bgColorClass = bgColors[index % bgColors.length]; // 循环使用颜色
                                const categoryHtml = `
                                    <a href="/qian/articles_by_tag.html?tag=${encodeURIComponent(category.tagName)}" class="category-item rounded-lg p-3 flex flex-col items-center text-center">
                                        <div class="w-12 h-12 ${bgColorClass} rounded-full flex items-center justify-center mb-2">
                                            <i class="fa fa-book text-xl"></i> <!-- 使用默认图标 -->
                                        </div>
                                        <h3 class="font-medium text-neutral-900 text-sm">${category.tagName}</h3>
                                        <p class="text-neutral-500 text-xs mt-1">${category.articleCount} 篇笔记</p>
                                    </a>
                                `;
                                categoriesContainer.append(categoryHtml);
                            });

                        } else if (response.code === 200 && Array.isArray(response.data) && response.data.length === 0) {
                             // 如果返回空数组
                             $('.grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6.gap-3').html('<p class="text-center text-neutral-500 col-span-full">暂无分类。</p>');
                        } else {
                            console.error('获取学习分类失败:', response.msg || '未知错误');
                            $('.grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6.gap-3').html('<p class="text-center text-red-500 col-span-full">加载分类失败，请稍后重试。</p>');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('学习分类请求失败:', error);
                        $('.grid.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6.gap-3').html('<p class="text-center text-red-500 col-span-full">加载分类失败，请稍后重试。</p>');
                    }
                });
            }

            // 页面加载完成后获取文章
            fetchArticles();

            // 获取学习分类并渲染
            fetchCategories();
        });
    }

    // Add logout functionality
    $('#logoutButton').on('click', function(e) {
        e.preventDefault(); // Prevent default link behavior
        // Clear session storage
        sessionStorage.removeItem('userId');
        sessionStorage.removeItem('username'); // Assuming username is also stored
        sessionStorage.removeItem('avatarUrl');
        sessionStorage.removeItem('userRole'); // Assuming userRole is also stored

        // Redirect to login page
        window.location.href = '/login.html'; // Replace with your login page path
    });

</script>
</body>
</html>